/* eslint-disable react/no-access-state-in-setstate */
import React, { Component } from 'react';
import { Row, Col, Button } from 'antd';
import Proptypes from 'prop-types';
import { FormattedMessage } from "react-intl";
import messages from "@i18n/messages";
import TYPE from "@design/constant/component-type";
import { SketchPicker  } from 'react-color';
import { createInput, createInputNumber, createSelect } from './factory';
import './Editor.less';
import { isNumber } from '../../utils/is-object';

class StylePanel extends Component {
  static propTypes = {
    node: Proptypes.object.isRequired,
    editor: Proptypes.object.isRequired,
  };

  state = {
    node: undefined,
    style: undefined,
    position: undefined,
    pickerVisible: false,
  };

  constructor(props) {
    super(props);
    this.state = {
      node: props.node,
      style: props.node.style,
      position: props.node.position,
    };
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.node !== prevState.node) {
      return {
        style: nextProps.node.style,
        position: nextProps.node.position,
        node: nextProps.node,
      };
    }
    return null;
  }

  onChange = (value, property) => {
    const style = this.state.style.set(property, value);
    this.setState({
      style,
    });
  };

  onPositionChange = (value, property) => {
    const position = this.state.position.set(property, value);
    this.setState({
      position,
    });
  };

  onEnter = (value, property) => {
    const style = this.state.style.set(property, value);
    const { editor, node } = this.props;
    editor.updateNode(node, { style });
  };

  onFocus = (value, property) => {
    if(property === 'color') {
      this.setState({ pickerVisible: true });
    }
  };

  onPositionEnter = (value, property) => {
    const position = this.state.position.set(property, value);
    const { editor, node } = this.props;
    editor.updateNode(node, { position });
  };

  onSubmitChange = () => {
    const { style, position } = this.state;
    const { editor, node } = this.props;
    editor.updateNode(node, { style, position });
  };

  onReset = () => {
    const { editor, node } = this.props;
    const defaultStyle = node.style
      .set('height', 'auto')
      .set('width', 'auto')
      .set('maxHeight', 'initial')
      .set('maxWidth', 'initial')
      .set('minHeight', 'auto')
      .set('maxHeight', 'auto')
      .set('fontSize', 'initial')
      .set('fontStyle', 'normal')
      .set('color', 'black');
    editor.updateNode(node, { style: defaultStyle });
  };

  handleOk = () => {
    const { style } = this.state;
    const { editor, node } = this.props;
    editor.updateNode(node, { style });
    this.setState({
      pickerVisible: false,
    });
  }

  renderFontStyle = () => {
    const { style } = this.state;
    const getSelectOptions = (property, options) => ({
      onChange: this.onEnter,
      data: style,
      property,
      options,
    });

    const options = {
      onChange: this.onChange,
      onEnter: this.onEnter,
      onFocuser: this.onFocus,
      data: style,
    };

    const handleColorChange = ({ hex }) => {
      const style = this.state.style.set('color', hex);
      this.setState({
        style,
        // pickerVisible: false,
        color: hex,
      });
    };
    
    return (
      <>
      <Row className="row" gutter={20}>
        <Col>
          <span className="label"><FormattedMessage {...messages.stylePanel.fontStyle} /></span>
          {createSelect(getSelectOptions("fontStyle", [
            { label: "正常", value: "normal" },
            { label: "加粗", value: "bold" },
            { label: "斜体", value: "italic" },
            { label: '带下划线', value: "underline" },
          ]))}
        </Col>
      </Row>
      <Row className="row" gutter={20}>
        <Col>
          <span className="label"><FormattedMessage {...messages.stylePanel.fontColor} /></span>
          {createInput({ ...options, property: 'color' })}
          { this.state.pickerVisible && (
            <div style={{ position: 'absolute',
              bottom: 50,
            }}
            >
              <SketchPicker
                className="picker"
                color={this.state.color}
                onChangeComplete={handleColorChange}
              />
              <Button
                style={{ position: 'absolute',
                  bottom: 6, right: 10 }} size="small"
                onClick={() => this.handleOk()}
              >确定
              </Button>
            </div>
          ) }
        </Col>
      </Row>
    </>
    );
  }

  render() {
    const { style, position, node } = this.state;
    const options = {
      size: 'small',
      onChange: this.onChange,
      onEnter: this.onEnter,
      data: style,
    };
    let children = null;
    switch (node.type) {
      case TYPE.TEXT_AREA:
      case TYPE.TEXT:
        children = this.renderFontStyle();
        break;
      default:
        break;
    }
    const positionOptions = {
      size: 'small',
      onChange: this.onPositionChange,
      onEnter: this.onPositionEnter,
      getValue: value => (isNumber(value) ? Number(value) : 0),
      data: position,
    };
    return (
      <div className="property-style-panel property-panel-detail">
        {node.object !== 'document' ? (
          <Row className="row" gutter={20}>
            <Col span={12}>
              <div className="label">X</div>
              {createInput({ ...positionOptions, property: 'x' })}
            </Col>
            <Col span={12}>
              <div className="label">Y</div>
              {createInput({ ...positionOptions, property: 'y' })}
            </Col>
          </Row>
        ) : null}

        <Row className="row" gutter={20}>
          <Col span={12}>
            <span className="label"><FormattedMessage {...messages.stylePanel.width} /></span>
            {createInput({ ...options, property: 'width' })}
          </Col>
          <Col span={12}>
            <span className="label"><FormattedMessage {...messages.stylePanel.height} /></span>
            {createInput({ ...options, property: 'height' })}
          </Col>
        </Row>
        <Row className="row" gutter={20}>
          <Col span={12}>
            <span className="label"><FormattedMessage {...messages.stylePanel.width.min} /></span>
            {createInput({ ...options, property: 'minWidth' })}
          </Col>
          <Col span={12}>
            <span className="label"><FormattedMessage {...messages.stylePanel.height.min} /></span>
            {createInput({ ...options, property: 'minHeight' })}
          </Col>
        </Row>
        <Row className="row" gutter={20}>
          <Col span={12}>
            <span className="label"><FormattedMessage {...messages.stylePanel.width.max} /></span>
            {createInput({ ...options, property: 'maxWidth' })}
          </Col>
          <Col span={12} gutter={20}>
            <span className="label"><FormattedMessage {...messages.stylePanel.height.max} /></span>
            {createInput({ ...options, property: 'maxHeight' })}
          </Col>
        </Row>
        <Row className="row" gutter={20}>
          <Col span={12}>
            <span className="label"><FormattedMessage {...messages.stylePanel.zIndex} /></span>
            {createInputNumber({ ...options, property: 'zIndex' })}
          </Col>
          <Col span={12}>
            <span className="label"><FormattedMessage {...messages.stylePanel.fontSize} /></span>
            {createInput({ ...options, property: 'fontSize' })}
          </Col>
        </Row>
        { children }
        <Row className="row submit-btn">
          <Button onClick={this.onSubmitChange}><FormattedMessage {...messages.propertyPanelUpdate} /></Button>
          <Button onClick={this.onReset}><FormattedMessage {...messages.propertyPanelReset} /></Button>
        </Row>
      </div>
    );
  }
}

export default StylePanel;
